<template>
  <div>
    <el-container>
    <el-header>个人信息</el-header>
    <el-main>
      <el-row gutter="24">
        <el-col :span="12" >姓名:{{name}}<el-input
          placeholder="请输入Name"
          v-model="input_name"
          clearable>
        </el-input></el-col>
        <el-col :span="12" >性别:{{sex}}<el-input
          placeholder="请输入性别"
          v-model="input_sex"
          clearable>
        </el-input></el-col>
      </el-row>
      <el-row gutter="24">
        <el-col :span="12" >教育程度:{{educationStatus}}<el-input
          placeholder="请输入Name"
          v-model="input_educationStatus"
          clearable>
        </el-input></el-col>
        <el-col :span="12" >婚姻状况:{{marrageStatus}}<el-input
          placeholder="请输入性别"
          v-model="input_marrageStatus"
          clearable>
        </el-input></el-col>
      </el-row>
      <el-row gutter="24">
        <el-col :span="12" >身份:{{profession}}<el-input
          placeholder="请输入Name"
          v-model="input_profession"
          clearable>
        </el-input></el-col>
      </el-row>
      <el-button type="primary" plain>Update</el-button>

    </el-main>

  </el-container>
  </div>
</template>

<script>
export default {
  name: 'Profile',
  data () {
    return {
      name: 'uzi',
      sex: '男',
      educationStatus: 'High_School',
      marrageStatus: 'Married',
      profession: 'STUDENT',
      input_name: '',
      input_sex: '',
      input_educationStatus: '',
      input_marrageStatus: '',
      input_profession: ''
    }
  }
}
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
</style>
